import { createApp, h } from 'vue'
import UiApiEditor from './ApiEditor.vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn'

type EditorOptions = {
  url: string,
  fullscreen?: boolean,
  callback?: (data?: any) => void
}

export default (options: EditorOptions) => {
  let app = createApp({
    data () {
      return {
        modelValue: true,
        fullscreen: options.fullscreen,
        onClosed: () => {
          app._container && app._container.remove()
          app.unmount()
          app = null
        }
      }
    },
    methods: {
      close () {
        this.modelValue = false
      }
    },
    render () {
      return h(ElConfigProvider, { locale: zhCn }, {
        default: () => h(UiApiEditor, {
          ...this.$data,
          ...options,
          fullscreen: this.fullscreen,
          onToggleFullscreen: () => {
            this.fullscreen = !this.fullscreen
          }
        })
      })
    }
  })

  const div = document.createElement('div')
  document.body.appendChild(div)
  app.mount(div)
}
